<script>
export default {
    props:{
        collapse:{
            type:Boolean,
            default:false
        },
        menuList:{
            type:Array,
            required:true
        }
    },
    render(c) {
          let arrs = this.makeMenu(c,this.menuList)
          return c(
            'el-menu',
            {
                attrs:{
                    "default-active":"2",
                    "background-color":"#545c64",
                    "text-color":"#fff",
                    "active-text-color":"#ffd04b",
                    "collapse":this.collapse
                }
            },
            arrs
        )
    },
    methods:{
        makeMenu(c,menuList){
            let arr=[]
            let _this=this
            menuList.forEach(it =>{
                let menu
                if (it.children) {
                   let myChild = this.makeMenu(c,it.children)
                    menu=c(
                    'el-submenu',
                    {
                        attrs:{
                            "index": it.id,
                        }
                    },
                    [c(
                        'template',
                        {
                            slot:"title",
                        },
                        [
                            c(
                                'i',
                                {
                                    class:'font-icon',
                                    domProps:{
                                        innerHTML:it.icon
                                    }
                                }
                            ),
                            c(
                                'span',
                                [
                                    it.name
                                ]
                            )
                        ]
                    ),
                    ...myChild
                    ]
                )
                }
                else{
                    menu=c(
                        'el-menu-item',
                        {
                            attrs:{
                                "index":it.id,
                            },
                            on:{
                                click(){
                                    // console.log(it)
                                    _this.$router.push(it.path)
                                }
                            }
                        },
                        [
                            it.name
                        ]
                    )
                }
                arr.push(
                    menu
                )
            })
            return arr
        }
    }
}
</script>